<html lang="zh-cn">
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="Guo Yinxin">

	<link rel="shortcut icon" href="icons/monitor.ico">

	<!-- 框架皮肤 -->
	<link href="css/flat-ui.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<title>海洋观测系统运行状态监控</title>

	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!-- Slider bar hover color set -->
	<link href="css/bootstrap.css" rel="stylesheet">

	<!-- Dashboard CSS-->
	<link href="css/dashboard.css" rel="stylesheet">

	<!-- Modal -->
	<link href="css/bootstrap-modal.css" rel="stylesheet">
	<link href="css/bootstrap-responsive.css" rel="stylesheet">

	<!-- Kendo UI CSS-->
	<link href="style/kendo.dataviz.min.css" rel="stylesheet" />
	<link href="style/kendo.dataviz.default.min.css" rel="stylesheet" />
	<link href="style/kendo.default.min.css" rel="stylesheet">
	<link href="style/kendo.common.min.css" rel="stylesheet">

	<!-- Modal CSS -->
	<style type="text/css">
		body.modal-open,
		.modal-open .navbar-fixed-top,
		.modal-open .navbar-fixed-bottom
		{
			margin-right: 0;
		}
		.modal
		{
			left: 50%;
			bottom: auto;
			right: auto;
			padding: 0;
			width: 500px;
			margin-left: -250px;
			background-color: #ffffff;
			border: 1px solid #999999;
			border: 1px solid rgba(0, 0, 0, 0.2);
			border-radius: 6px;
			-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
			box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
			background-clip: padding-box;
		}
		.modal.container
		{
			max-width: none;
		}
	</style>
	<style type="text/css">
		.backG
		{
			background-color: #fff;
			display: block;
			border-style: solid;
			border-width: 1px;
			border-color: #ddd;
			border-radius: 4px 4px 4px 4px;
			box-shadow: none;
			margin-left: 0;
			margin-right: 0;
			margin-top: 5;
			margin-bottom: 5;
		}
	</style>
</head>

<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container-fluid" style="background-color:#0A64A4">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="brand" href="index.html" style="padding-left:20px">
				<img alt="监控icon" src="icons/monitor_48.png">
				<span style="font-size:26px;color:#ffffff;vertical-align:middle">海洋观测系统运行状态监控</span>
			</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav navbar-right">
				<!--<li><a id="setting" href="#responsive" data-toggle="modal"><span class="icon-cogs"></span>&nbsp;设置</a></li>-->
				<li><a id="message" href="#responsive" data-toggle="modal"><span class="icon-envelope"></span>&nbsp;消息</a></li>
				<li><a id="about" href="#responsive" data-toggle="modal"><span class="icon-question-sign"></span>&nbsp;关于</a>
				</li>
				<li class="dropdown">
					<a href="#user" class="dropdown-toggle" data-toggle="dropdown">
						<span class="icon-user"></span>
						<span id="loginName">&nbsp;用户</span>
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu">
						<li><a id="account" href="#responsive" data-toggle="modal"><i class="icon-user"></i>&nbsp;账户</a></li>
						<li class="divider"></li>
						<li><a href="login.html" onclick="logout()"><i class="icon-off"></i>&nbsp;退出</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1 sidebar" style="background-color:#2E3538;font-family:'微软雅黑'">
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="index.html">
						<span class="icon-dashboard icon-2x" style="color:#dfdfdf;"></span>
						<span style="font-size:18px; color:#dfdfdf;">仪表盘</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="file.html">
						<span class="icon-file-text icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">&nbsp;文件</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="server.html">
						<span class="icon-tasks icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">服务器</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="cpu.html">
						<span class="icon-circle-blank icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">&nbsp;CPU</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="memory.html">
						<span class="icon-ticket icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">内存</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li class="active">
					<span class="glow"></span>
					<a href="disk.html">
						<span class="icon-hdd icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">&nbsp;磁盘</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="network.html">
						<span class="icon-globe icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">&nbsp;网络</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="database.html">
						<span class="icon-calendar icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">数据库</span>
					</a>
				</li>
			</ul>
		</div>

		<div class="col-sm-10 col-sm-offset-2 col-md-10 col-md-offset-2 col-lg-11 col-lg-offset-1 main">
			<ul class="breadcrumb">
				<li><a href="index.html">首页</a>
				</li>
				<li class="active">磁盘
				</li>
			</ul>
			<div class="row placeholders" style="padding-left:15px;">
				<div id="diskChart" class=" panel-default col-xs-12 col-sm-12 col-md-12 col-lg-12 placeholder  panel-default "></div>
			</div>
		</div>
	</div>
</div>
<hr>
<footer class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:20px">
	<p style="text-align:center">Copyright © 2014 ShangHai Ocean University * Institute For Digital Ocean . All Rights
		Reserved.</p>
</footer>
</div>

<!-- Modal Definitions (tabbed over for <pre>) -->
<div id="responsive" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h4 id="responsiveTitle" class="modal-title" style="text-align:center;font-weight:bold;"></h4>
	</div>
	<div class="modal-body">
		<div class="row">
			<div id="responsiveBody">// class="col-md-offset-1 col-md-10">

			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
		<!--<button type="button" class="btn btn-primary">Save changes</button>-->
	</div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- Modal JS -->
<script src="js/bootstrap-modalmanager.js"></script>
<script src="js/bootstrap-modal.js"></script>

<!-- Kendo UI -->
<script src="js/kendo.dataviz.min.js"></script>
<script src="js/kendo.web.min.js"></script>
<script src="js/kendo.all.min.js"></script>

<script>
	//全局变量声明
	//Server URL
	//    var serverURL = "http://192.168.182.48:8080/api/sql?sql=";
	var serverURL = "http://202.121.66.51:8083/api/sql?sql=";

	//Responsive <a> 的点击监听事件
	$('a').click(function (e)
	{
		var title = document.getElementById("responsiveTitle");
		var body = document.getElementById("responsiveBody");
		while (body.childNodes.length)
		{
			body.removeChild(body.firstChild);
		}
		console.log(e.target.id);
		body.className = "col-md-offset-1 col-md-10";
//        var resp = document.getElementById("responsive");
//        resp.dataset.width = "760";
//        console.log("target ID:"+e.target.id+"  "+ e.currentTarget);
		switch (e.target.id)
		{
			case "about":
				title.innerText = "关于“海洋观测系统运行状态监控”";
				bodyAbout(body);
				break;
			case "message":
				title.innerText = "消息";
				bodyMessage(body);
				break;
			case "setting":
				title.innerText = "设置";
				bodySetting(body);
				break;
			case "account":
				title.innerText = "账户信息";
				bodyAccount(body);
				break;
			default :
				title.innerText = "Responsive Title";
		}
	});

	// About Body function
	function bodyAbout(fatherDiv)
	{
		var h4 = document.createElement("h4");
		h4.innerText = "介绍：";
		fatherDiv.appendChild(h4);
		var para = document.createElement("p");
		para.innerText = "海洋观测系统运行状态监控是海洋公益性行业科研专项项目“海洋观测系统运行状态监控技术研究与示范”的子项目之一。" +
				"        该系统由国家海洋局东海分局信息中心与上海海洋大学合作研究开发，研发成员有：郭颖新，季丽伟，韦躐晟等。";
		fatherDiv.appendChild(para);
	}
	// Message Body function
	function bodyMessage(fatherDiv)
	{
		var messageDiv = document.createElement("div");
		messageDiv.id = "messageDiv";
		fatherDiv.className = "col-md-12";
		fatherDiv.appendChild(messageDiv);

		var messageInfoSql = "select * from messageInfo group by ID desc limit 200";
		var messageUrl = serverURL + messageInfoSql;
		$.ajax({
			url: messageUrl, //请求的url地址
			dataType: "json", //返回格式为json
			async: true, //请求是否异步，默认为异步，这也是ajax重要特性
			//data:{"id":"value"},    //参数值
			type: "GET", //请求方式
			beforeSend: function ()
			{
				//请求前的处理
			},
			success: function (req)
			{
				//请求成功时处理
				for (var i in req)
				{
					req[i].DateTime = req[i].DateTime.replace("T", " ");
				}
				$("#messageDiv").kendoGrid({
					dataSource: {
						data: req,
						pageSize: 10
					},
					pageable: {
						refresh: true,
						pageSizes: true,
						buttonCount: 5
					},
					navigatable: true,
//                    height: 430,
					scrollable: {
						virtual: true
					},
					sortable: true,
					columns: [{
						field: "ID",
						title: "ID",
						width: 10
					}, {
						field: "ServerID",
						title: "Server",
						width: 20
					}, {
						field: "Aspect",
						title: "方面",
						width: 30
					}, {
						field: "Content",
						title: "内容",
						width: 80
					}, {
						field: "DateTime",
						title: "时间",
						width: 45
					}]
				});
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}
	// Setting Body function
	function bodySetting(fatherDiv)
	{

	}
	// Account Body function
	function bodyAccount(fatherDiv)
	{
		var userCount = document.createElement("div");
		userCount.id = "userCount";
		fatherDiv.appendChild(userCount);

		var userInfoSql = "select * from user where UserName=\"" + getCookie("loginUser") + "\"";
		var userUrl = serverURL + userInfoSql;
		$.ajax({
			url: userUrl, //请求的url地址
			dataType: "json", //返回格式为json
			async: true, //请求是否异步，默认为异步，这也是ajax重要特性
			//data:{"id":"value"},    //参数值
			type: "GET", //请求方式
			beforeSend: function ()
			{
				//请求前的处理
			},
			success: function (req)
			{
				//请求成功时处理
				$("#userCount").kendoGrid({
					dataSource: {
						data: req
					},
					navigatable: true,
//                    height: 430,
					scrollable: {
						virtual: true
					},
					sortable: true,
					columns: [{
						field: "UserName",
						title: "用户名",
						width: 50
					}, {
						field: "Passwords",
						title: "密码",
						width: 50
					}, {
						field: "Level",
						title: "权限等级",
						width: 40
					}, {
						field: "RegistTime",
						title: "注册时间",
						width: 80
					}, {
						field: "ID",
						title: "ID",
						width: 20
					}]
				});
			},
			complete: function ()
			{
				//请求完成的处理
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}

	// Get Cookie Function
	function getCookie(key)
	{
		var arr = document.cookie.match(new RegExp("(^|)" + key + "=([^;]*)(;|$)"));
		if (arr != null)
		{
			return unescape(arr[2]);
		}
		return null;
	}
	// Delete Cookie
	function deleteCookie(key)
	{
		var exp = new Date();
		exp.setTime(exp.getTime() - 1);
		var cVal = getCookie(key);
		if (cVal != null)
		{
			document.cookie = key + "=" + cVal + ";expires=" + exp.toGMTString();
		}
	}
	// Logout function
	function logout()
	{
		deleteCookie("loginUser");
	}
	$(document).ready(function ()
	{
		if (!getCookie("loginUser"))
		{
			window.location = "login.html";
		}
		else
		{
			//Init username from cookie
			document.getElementById("loginName").innerText = " " + getCookie("loginUser");
		}

	})
</script>

<script>
	var per_IOdatalength = 88;   //每个IO表显示的数据量
	var per_IOdatalength_min = 20;   //每个IO表至少显示的数据量
	var Label_step = 13;//标签步长
	var IO_Chart_unit = "seconds";//IO表时间单位
	var IO_unit_step = 24;

	var resourceurl = 'http://202.121.66.51:8083/api/sql';
	var procedureresourceurl = 'http://202.121.66.51:8083/api/callsp';
	var io_procedure = "get_perioinfo_limit80";
	var disk_procedure = "disk_get_tepm";
	var serversql = "select * from server";
	var disksql = "select * from (select * from diskinfo where DataTime > DATE_SUB(now(),INTERVAL '0 0:50:0' DAY_SECOND) order by DataTime desc) as d group by ServerID,DiskID";

	//var iosql="select ID,ServerID,WriteSpeed,ReadSpeed,DataTime from ioinfo where (select count(*) from (select * from ioinfo group by ServerID,DataTime desc) as f where f.ServerID = ioinfo.ServerID and f.DataTime >= ioinfo.DataTime) <= 300";
	//var iosql="select ID,ServerID,WriteSpeed,ReadSpeed,DataTime from ioinfo where (select count(*) from (select * from (select * from ioinfo where DataTime > DATE_SUB(now(),INTERVAL '0 0:20:0' DAY_SECOND) order by DataTime desc limit 800) as dd group by ServerID,DataTime desc) as f where f.ServerID = ioinfo.ServerID and f.DataTime >= ioinfo.DataTime) <= "+per_IOdatalength;
	//var iosql="select ID,ServerID,WriteSpeed,ReadSpeed,DataTime from (select  ID,ServerID,WriteSpeed,ReadSpeed,DataTime,@num := if(@ServerID = ServerID, @num + 1, 1) as row_number, @ServerID := ServerID as dummy from ioinfo order by ServerID, DataTime desc) as x where x.row_number <= 100";
	//时间复杂度小

	var mycharts = {};


	//--------------------------------------------------------------------------------------------------------//

	function updateData()
	{
		//var resourceurl = 'http://192.168.182.40:8080/api/sql';
		// console.log(1);
		var serveraj0 = $.ajax({
			url: resourceurl,// 跳转到 action
			type: 'get',
			data: {sql: serversql},
			//dataType:'json',
			success: function (serdata)
			{
				var ServerData = [];
				for (var s = 0; s < serdata.length; s++)
				{
					ServerData[s] =
					{
						SerID: serdata[s].ServerID,
						SerIP: serdata[s].ServerIP,
						SerName: serdata[s].ServerName,
						SerMemoryCount: serdata[s].ServerMemoryCount,
						SerDiskCount: serdata[s].ServerDiskCount,
						disks: [],
						IOsinfo: {
							WriSpeed: [],
							ReaSpeed: [],
							DatTime: []
						}
					};
				}
				var diskaj = $.ajax({
//                url: resourceurl,// 跳转到 action
//                data: {sql: disksql},
					url: procedureresourceurl,// 跳转到 action
					data: {spname: disk_procedure},
					type: 'get',
					//dataType:'json',
					success: function (disdata)
					{
						for (var i = 0; i < disdata.length; i++)
						{

							for (var s = 0; s < serdata.length; s++)
							{

								if (ServerData[s].SerID == disdata[i].ServerID)
								{
									// alert(ServerData.SerID+" "+disdata[s].diskinfos[i].ServerID);
									var disksjson = {};
									var disksDataArr = [];
									var diskusedjson = {};
									var diskleftjson = {};
									//$(disksjson).attr("diskID",this.DiskID);
									$(diskusedjson).attr("cateField", "Used");
									$(diskusedjson).attr("valueField", disdata[i].DiskUsed);
									$(diskusedjson).attr("explode", "true");
									$(diskleftjson).attr("cateField", "Left");
									$(diskleftjson).attr("valueField", disdata[i].DiskLeft);

									disksDataArr.push(diskusedjson);
									disksDataArr.push(diskleftjson);

									$(disksjson).attr("diskID", disdata[i].DiskID);
									$(disksjson).attr("diskdata", disksDataArr);
									ServerData[s].disks.push(disksjson);
									break;
								}
							}
						}
						var ioajax = $.ajax
						({
							url: procedureresourceurl,// 跳转到 action
							data: {spname: io_procedure},
							type: 'get',
							//dataType: 'json',
							success: function (iodata)
							{
								for (var i = 0; i < iodata.length; i++)
								{

									for (var s = 0; s < ServerData.length; s++)
									{

										if (ServerData[s].SerID == iodata[i].ServerID)
										{
											ServerData[s].IOsinfo.WriSpeed.push(iodata[i].WriteSpeed);
											ServerData[s].IOsinfo.ReaSpeed.push(iodata[i].ReadSpeed);
											ServerData[s].IOsinfo.DatTime.push(new Date((iodata[i].DataTime).substr(0, 10) + " " + (iodata[i].DataTime).substr(11, 8)));
											//ServerData[s].IOsinfo.DatTime.push(iodata[i].DataTime);
											s = ServerData.length;
											//break;
										}
									}
								}

								for (var k = 0; k < ServerData.length; k++)
								{
									if ((ServerData[k].IOsinfo.WriSpeed.length >= per_IOdatalength_min) && (ServerData[k].IOsinfo.WriSpeed.length <= per_IOdatalength))
									{
										document.getElementById("Chart_main_div" + k).className = "col-xs-6 col-sm-6 col-md-6 col-lg-6 panel panel-default";
										document.getElementById("Ser_Name_div" + k).className = "panel-heading";

										document.getElementById("IOChart" + k).className = " ";

										var chartio = $("#IOChart" + k).kendoChart({
											theme: "bootstrap",
											title: {
												text: ServerData[k].SerName + " I/O 速率"
											},
											legend: {
												position: "top"
											},

											series: [
												{
													type: "area",

													missingValues: "gap",  //interpolate  ,  gap
													data: ServerData[k].IOsinfo.WriSpeed,
													name: "写速率 [kb/s]",
													color: "#007eff",
													axis: "writeAxes"
												},
												{
													type: "area",
													missingValues: "gap",  //interpolate  ,  gap
													data: ServerData[k].IOsinfo.ReaSpeed,
													name: "读速率 [kb/s]",
													color: "#ffae00",
													axis: "readAxes"
												}
											],
											valueAxes: [
												{
													name: "writeAxes",
													color: "#007eff"
													/*   minorGridLines: {
													 visible: true
													 }  */
													// min: 0,
													//max: 1000
												},
												{
													name: "readAxes",
													color: "#ffae00",
													position: "right"
													// min: 0,
													// max: 1000
												}
											],
											categoryAxis: {
												categories: ServerData[k].IOsinfo.DatTime,
												labels: {
													// visible:true,
													// skip:100,
													step: Label_step,
													// rotation: -90
													dateFormats: {
														//  days:"M-d"
													}
												},
												crosshair: {
													dashType: "solid",
													//opacity: 0.3,
													color: "green",
													width: 1,
													visible: true,
													tooltip: {
														background: "green",
														border: {
															color: "green",
															width: 1
														},

														position: "bottom",
														visible: true
													}

												},
												//baseUnit: "fit"
												baseUnit: IO_Chart_unit,
												baseUnitStep: IO_unit_step

												//justified: true
											},

											tooltip: {
												shared: true,
												visible: true,
												format: "{0}",
												//template: "#=series.name #   #=category.toString().substring(0,24)#  : #= value #"
												template: "  #= value #"
												//sharedTemplate:kendo.template($("#template").html())
											},
											transitions: false


										});
										if (ServerData[k].disks.length != 0)
										{
											document.getElementById("DiskCharts" + k).className = " col-xs-12 col-sm-12 col-md-12 col-lg-12  panel panel-default";
											for (var j = 0; j < ServerData[k].disks.length; j++)
											{

												var ct = $("#" + "Server" + k + "DiskChart" + j).kendoChart({
													theme: "metro",
													title: {
														text: ServerData[k].disks[j].diskID + " 盘"
													},
													legend: {
														position: "bottom"
													},

													series: [
														{
															type: "donut",
															size: 35,
															//type: "pie",
															field: "valueField",
															categoryField: "cateField",
															// explodeField: "explode",
															labels: {
																visible: true,
																background: "transparent",
																position: "outsideEnd",
																distance: 10,
																//template: "#= category #:#= value# G"
																template: "#= value# G"
															}
														}
													],
													seriesColors: ["#42a7ff", "#666666", "#999999", "#cccccc"],
													tooltip: {
														visible: true,
														template: "${ category } - ${ value }G"
													},

													chartArea: {
														background: ""
													},
													seriesDefaults: {
														type: "donut",
														startAngle: 90
													},
													dataSource: ServerData[k].disks[j].diskdata,
													transitions: false
												});
											}
										}
										else
										{
											document.getElementById("Chart_main_div" + k).className = "col-xs-6 col-sm-6 col-md-6 col-lg-6 panel panel-danger";
											document.getElementById("DiskCharts" + k).className = "panel panel-heading";
											document.getElementById("DiskCharts" + k).innerText = "未能获取磁盘使用率数据\n请检查该服务器上的监测程序是否正常运行，并尝试刷新本页面";

										}

									}
									else
									{
										document.getElementById("Chart_main_div" + k).className = "col-xs-6 col-sm-6 col-md-6 col-lg-6 panel panel-danger";
										document.getElementById("Ser_Name_div" + k).className = "panel-body";
										//Chart_main_div.className = "col-xs-6 col-sm-6 col-md-6 col-lg-6 placeholder panel panel-danger";
										//Ser_Name_div.className="panel-body"

										document.getElementById("IOChart" + k).className = "panel panel-heading";
										document.getElementById("IOChart" + k).innerText = "未能获取服务器IO数据\n请检查该服务器上的监测程序是否正常运行，并尝试刷新本页面";
										//IO_Chart_div.className="panel panel-heading";
										// IO_Chart_div.innerText="NO DATA\n PLEASE MAKE SURE THE SERVER'S MONITOR APPLICATION IS OPENED \nTHEN REFRESH THIS WINDOW";
									}
								}
								setTimeout("updateData()", 4000);
							},
							error: function ()
							{
								// view("异常！");
								console.log("IO数据获取异常");

							}
						});
					},
					error: function ()
					{
						// view("异常！");
						console.log("Disk数据获取异常");
					}
				});
			},
			error: function ()
			{
				// view("异常！");
				console.log("Server数据获取异常");
			}
		});


	}

	//--------------------------------------------------------------------------------------------------------//     createchart
	function createIOChart(ServerData)
	{
		for (var i = 0; i < ServerData.length; i++)
		{
			var Chart_main_div = document.createElement("div");
			// Chart_main_div.className = "col-xs-6 col-sm-6 col-md-6 col-lg-6 panel panel-default";
			Chart_main_div.id = "Chart_main_div" + i;
			$("#diskChart").append(Chart_main_div);

			var Ser_Name_div = document.createElement("h4");
			// Ser_Name_div.className="panel-heading" ;
			Ser_Name_div.id = "Ser_Name_div" + i;
			Ser_Name_div.innerText = "服务器：" + ServerData[i].SerName;
			Chart_main_div.appendChild(Ser_Name_div);

			var IP_div = document.createElement("h4");
			IP_div.innerText = "IP地址：" + ServerData[i].SerIP;
			Chart_main_div.appendChild(IP_div);

			var IO_Chart_div = document.createElement("div");
			IO_Chart_div.id = "IOChart" + i;
			Chart_main_div.appendChild(IO_Chart_div);

			$("#IOChart" + i).height(300);

			if ((ServerData[i].IOsinfo.WriSpeed.length >= per_IOdatalength_min) && (ServerData[i].IOsinfo.WriSpeed.length <= per_IOdatalength))
			{


				document.getElementById("Chart_main_div" + i).className = "col-xs-6 col-sm-6 col-md-6 col-lg-6 panel panel-default";
				document.getElementById("Ser_Name_div" + i).className = "panel-heading";

				var chartio = $("#IOChart" + i).kendoChart({
					theme: "bootstrap",
					title: {
						text: ServerData[i].SerName + " I/O 速率"
					},
					legend: {
						position: "top"
					},

					series: [
						{
							missingValues: "gap",  //interpolate  ,  gap
							type: "area",
							data: ServerData[i].IOsinfo.WriSpeed,
							name: "写速率 [kb/s]",
							color: "#007eff",
							axis: "writeAxes"
						},
						{
							missingValues: "gap",  //interpolate  ,  gap
							type: "area",
							data: ServerData[i].IOsinfo.ReaSpeed,
							name: "读速率 [kb/s]",
							color: "#ffae00",
							axis: "readAxes"
						}
					],
					valueAxes: [
						{
							name: "writeAxes",
							color: "#007eff"
							/*   minorGridLines: {
							 visible: true
							 }  */
							// min: 0,
							//max: 1000
						},
						{
							name: "readAxes",
							color: "#ffae00"
							// min: 0,
							// max: 1000
						}
					],
					categoryAxis: {
						categories: ServerData[i].IOsinfo.DatTime,
						labels: {
							// visible:true,
							// skip:100,
							step: Label_step,
							// rotation: -90
							dateFormats: {
								//  days:"M-d"
							}
						},
						crosshair: {
							dashType: "solid",
							//opacity: 0.3,
							color: "green",
							width: 1,
							visible: true,
							tooltip: {
								background: "green",
								border: {
									color: "green",
									width: 1
								},

								position: "bottom",
								visible: true
							}

						},
						//baseUnit: "fit"
						baseUnit: IO_Chart_unit,
						baseUnitStep: IO_unit_step

						// ,justified: true
					},

					tooltip: {
						shared: true,
						visible: true,
						format: "{0}",
						//template: "#=series.name #   #=category.toString().substring(0,24)#  : #= value #"
						template: "  #= value #"
						//sharedTemplate:kendo.template($("#template").html())
					}


				});

				var Disk_Main_div = document.createElement("div");
				Disk_Main_div.className = "col-xs-12 col-sm-12 col-md-12 col-lg-12  panel panel-default";
				Disk_Main_div.id = "DiskCharts" + i;
				Chart_main_div.appendChild(Disk_Main_div);

				var Disk_Name_div = document.createElement("h4");
				Disk_Name_div.className = "panel-body";
				//span.className = "text-muted";
				Disk_Name_div.innerText = ServerData[i].SerName + " 磁盘使用率";
				Disk_Main_div.appendChild(Disk_Name_div);

				if (ServerData[i].disks.length != 0)
				{
					for (var j = 0; j < ServerData[i].disks.length; j++)
					{
						var div11 = document.createElement("div");
						div11.id = "Server" + i + "DiskChart" + j;
						div11.className = "col-xs-6 col-sm-6 col-md-6 col-lg-6 ";
						Disk_Main_div.appendChild(div11);

						$("#" + "Server" + i + "DiskChart" + j).height(200);
						$("#" + "Server" + i + "DiskChart" + j).width(200);
						var ct = $("#" + "Server" + i + "DiskChart" + j).kendoChart({
							theme: "metro",
							title: {
								text: ServerData[i].disks[j].diskID + " 盘"
							},
							legend: {
								position: "bottom"
							},

							series: [
								{
									type: "donut",
									//type: "pie",
									size: 35,
									field: "valueField",
									categoryField: "cateField",
									// explodeField: "explode",
									labels: {
										visible: true,
										background: "transparent",
										position: "outsideEnd",
										distance: 10,
										//template: "#= category #:#= value# G"
										template: "#= value# G"
									}
								}
							],
							seriesColors: ["#42a7ff", "#666666", "#999999", "#cccccc"],
							tooltip: {
								visible: true,
								template: "${ category } - ${ value }G"
							},

							chartArea: {
								background: ""
							},
							seriesDefaults: {
								type: "donut",
								startAngle: 90
							},
							dataSource: ServerData[i].disks[j].diskdata
						});
					}
				}
				else
				{
					document.getElementById("Chart_main_div" + i).className = "col-xs-6 col-sm-6 col-md-6 col-lg-6 panel panel-danger";
					document.getElementById("DiskCharts" + i).className = "panel panel-heading";
					document.getElementById("DiskCharts" + i).innerText = "未能获取磁盘使用率数据\n请检查该服务器上的监测程序是否正常运行，并尝试刷新本页面";

				}


			}
			else
			{
				document.getElementById("Chart_main_div" + i).className = "col-xs-6 col-sm-6 col-md-6 col-lg-6 panel panel-danger";
				document.getElementById("Ser_Name_div" + i).className = "panel-body";
				//Chart_main_div.className = "col-xs-6 col-sm-6 col-md-6 col-lg-6 placeholder panel panel-danger";
				//Ser_Name_div.className="panel-body"

				document.getElementById("IOChart" + i).className = "panel panel-heading";
				document.getElementById("IOChart" + i).innerText = "未能获取服务器IO数据\n请检查该服务器上的监测程序是否正常运行，并尝试刷新本页面";
				//IO_Chart_div.className="panel panel-heading";
				// IO_Chart_div.innerText="NO DATA\n PLEASE MAKE SURE THE SERVER'S MONITOR APPLICATION IS OPENED \nTHEN REFRESH THIS WINDOW";
				Chart_main_div.appendChild(document.getElementById("IOChart" + i));
			}
		}
	}
	$(document).ready(function ()
	{
		if (!getCookie("loginUser"))
		{
			window.location = "login.html";
		}
		else
		{
			var serveraj = $.ajax({
				url: resourceurl,// 跳转到 action
				type: 'get',
				data: {sql: serversql},
				//dataType:'json',
				success: function (serdata)
				{
					var ServerData = [];
					for (var s = 0; s < serdata.length; s++)
					{
						ServerData[s] =
						{
							SerID: serdata[s].ServerID,
							SerIP: serdata[s].ServerIP,
							SerName: serdata[s].ServerName,
							SerMemoryCount: serdata[s].ServerMemoryCount,
							SerDiskCount: serdata[s].ServerDiskCount,
							disks: [],
							IOsinfo: {
								WriSpeed: [],
								ReaSpeed: [],
								DatTime: []
							}
						};
					}

					var diskaj = $.ajax({
						url: procedureresourceurl,// 跳转到 action
						data: {spname: disk_procedure},
						type: 'get',
						//dataType:'json',
						success: function (disdata)
						{
							for (var i = 0; i < disdata.length; i++)
							{

								for (var s = 0; s < serdata.length; s++)
								{

									if ((ServerData[s].SerID == disdata[i].ServerID))
									{
										var disksjson = {};
										var disksDataArr = [];
										var diskusedjson = {};
										var diskleftjson = {};
										$(diskusedjson).attr("cateField", "Used");
										$(diskusedjson).attr("valueField", disdata[i].DiskUsed);
										$(diskusedjson).attr("explode", "true");
										$(diskleftjson).attr("cateField", "Left");
										$(diskleftjson).attr("valueField", disdata[i].DiskLeft);

										disksDataArr.push(diskusedjson);
										disksDataArr.push(diskleftjson);

										$(disksjson).attr("diskID", disdata[i].DiskID);
										$(disksjson).attr("diskdata", disksDataArr);
										ServerData[s].disks.push(disksjson);
										break;
									}
								}
							}
							var ioajax = $.ajax
							({
								url: procedureresourceurl,// 跳转到 action
								data: {spname: io_procedure},
								type: 'get',
								success: function (iodata)
								{
									//alert(serdata.servers[0].ServerID);
									for (var i = 0; i < iodata.length; i++)
									{
										for (var s = 0; s < ServerData.length; s++)
										{

											if (ServerData[s].SerID == iodata[i].ServerID)
											{
												ServerData[s].IOsinfo.WriSpeed.push(iodata[i].WriteSpeed);
												ServerData[s].IOsinfo.ReaSpeed.push(iodata[i].ReadSpeed);
												ServerData[s].IOsinfo.DatTime.push(new Date((iodata[i].DataTime).substr(0, 10) + " " + (iodata[i].DataTime).substr(11, 8)));
												//ServerData[s].IOsinfo.DatTime.push(iodata[i].DataTime);
												s = ServerData.length;
												//break;
											}
										}
									}

									createIOChart(ServerData);
									updateData();
								},
								error: function ()
								{
									alert("异常！");
								}
							});

						},
						error: function ()
						{
							alert("异常！");
						}
					});

				},
				error: function ()
				{
					// view("异常！");
					alert("异常！");
				}

			});
		}

	});

</script>


</body>
</html>
